import classNames from 'classnames';
import React, { useRef, useState } from 'react';
import { YmCssMotion } from 'ym-design';
import './index.less';

const Div = React.forwardRef<HTMLDivElement, any>((props, ref) => {
  const { holderef, ...restProps } = props;
  const pTestRef = useRef<HTMLParagraphElement>(null);

  React.useEffect(() => {
    console.log('DIV >>> Mounted!');
    return () => {
      console.log('DIV >>> UnMounted!');
    };
  }, []);

  return (
    <div className="div-comp">
      {/*  ref=((node) => {}) */}
      <div {...restProps} ref={holderef} />
      <p ref={pTestRef}></p>
    </div>
  );
});

function CssMotionBasicPage() {
  const [show, setShow] = useState<boolean>(true);
  //离开后销毁dom
  const [removeOnLeave, setRemoveOnLeave] = useState<boolean>(true);
  const demoBlockRef = useRef<HTMLDivElement>(null);

  const onTrigger = () => {
    setShow((prev) => !prev);
  };

  const onRemoveOnLeave = () => {
    setRemoveOnLeave((prev) => !prev);
  };

  //appear
  const onAppearPrepare = () => {
    console.log('--onAppearPrepare 2s之后执行onAppearStart--');
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve(null);
      }, 2000);
    });
  };

  const onAppearStart = (element: any) => {
    console.log('--onAppearStart--element--:', element);
  };

  const onAppearActive = () => {
    console.log('--onAppearActive--');
  };

  const onAppearEnd = () => {
    console.log('--onAppearEnd---');
  };

  //enter
  const onEnterPrepare = (element: any) => {
    console.log('--onEnterPrepare 2s之后执行onEnterStart--element--:', element);
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve(null);
      }, 2000);
    });
  };

  const onEnterStart = (element: any) => {
    console.log('--onEnterStart--element--:', element);
  };

  const onEnterActive = (element: any) => {
    console.log('--onEnterActive--element--', element);
  };

  const onEnterEnd = (element: any, event: any) => {
    console.log('--onEnterEnd--element--event--:', element, event);
  };

  //leave
  const onLeavePrepare = () => {
    console.log('--onLeavePrepare--');
  };

  const onLeaveStart = () => {
    console.log('--onLeaveStart--');
  };

  const onLeaveActive = () => {
    console.log('--onLeaveActive--');
  };

  const onLeaveEnd = (dom: any, event: any) => {
    console.log('--onLeaveEnd--dom--event--:', dom, event);
  };

  return (
    <div>
      <div style={{ margin: '30px 0' }}>
        <label>
          <input type="checkbox" onChange={onTrigger} checked={show} />
          Show Component
        </label>

        <label>
          <input
            type="checkbox"
            onChange={onRemoveOnLeave}
            checked={removeOnLeave}
          />
          removeOnLeave
        </label>
      </div>

      <YmCssMotion
        visible={show}
        forceRender={false}
        motionName="transition"
        // removeOnLeave={false}
        removeOnLeave={removeOnLeave}
        // motionAppear={false} //默认为true, false:取消该阶段的动画
        // motionEnter={false}
        // motionLeave={false}
        // leavedClassName="hidden1"
        onAppearPrepare={onAppearPrepare}
        onAppearStart={onAppearStart}
        onAppearActive={onAppearActive}
        onAppearEnd={onAppearEnd}
        onEnterPrepare={onEnterPrepare}
        onEnterStart={onEnterStart}
        onEnterActive={onEnterActive}
        onEnterEnd={onEnterEnd}
        onLeavePrepare={onLeavePrepare}
        onLeaveStart={onLeaveStart}
        onLeaveActive={onLeaveActive}
        onLeaveEnd={onLeaveEnd}
        onVisibleChanged={(visible) => {
          console.log('--Basic--Visible Changed--:', visible);
        }}
        ref={demoBlockRef}
      >
        {({ style, className }, motionRef): any => (
          <Div
            holderef={motionRef}
            className={classNames('demo-block', className)}
            style={style}
          />
        )}
      </YmCssMotion>
    </div>
  );
}

export default CssMotionBasicPage;
